<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单练习</title>
		<style>
			
		</style>
		<!--引入外部第三方css文件,rel固定值：样式表，href链接地址
		.min意思最小文件，压缩（把文件所有内容换行和空格缩进都去掉一行）-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		
	</head>
	<body>
		<div class="container">
		  <h2>学生信息管理系统mis</h2>
		  <div class="form-group">
			  <!--lable标签 for属性光标定位，点击后可以对应id框-->
			  <label>姓名：</label>
			  <!--文本输入框,h5新特性placeholder属性-->
			  <input type="text" name="name" style="width: 320px;"
			  class="form-control"
			  placeholder="请输入姓名..."
			  />
		  </div>
		  <div class="form-group">
			  <label>年龄：</label>
			  <input type="number" name="age" id="age" 
			  class="form-control" style="width: 320px;"
			    placeholder="请输入年龄"
			  />
			  </div>
			  <div class="form-group">
				  <label for="sex">性别：（单选框）</label>
				  <!--radio互斥，同名会只能选择一个-->
				  <div class="radio-inline">
			  	  <input type="radio" name="sex" id="sex" />男
				  </div>
				  <div class="radio-inline">
				  <input type="radio" name="sex" id="sex" />女
				  </div>
			  </div>
			  
			  <div class="form-group">
				  <label>爱好：（多选）</label>
				  <div class="checkbox-inline">
				  	<input type="checkbox" name="hobby" id="hobby" />乒乓球
				  </div>
				  <div class="checkbox-inline">
				  <input type="checkbox" name="hobby" id="hobby" />爬山
				  </div>
				  <div class="checkbox-inline">
				  	<input type="checkbox" name="hobby" id="hobby" />唱歌
				  </div>
			  </div>
			  
			  <div class="form-group">
				  <label>学历：(下拉框)</label>
				  <!--单选，选择"幼儿园"，表单提交"1"，性能高-->
				  <select class="form-control" name="edu" id="edu" 
				  style="width: 320px;">
					<option value="1">幼儿园</option>  
					<option value="2">小学</option>
					<option value="3">初中</option>
					<option value="4">高中</option>
					<option value="5">大专</option>
					<option value="6" >本科</option>
					<option value="7">研究生</option>
					<option value="8">博士</option>
				  </select>
			  </div>
			  <div class="form-group">
				  <!--class属性支持多个样式，样式之间空格隔开-->
				  <input class="btn btn-primary" type="button" name="submit" value="保存" />
				  <button class="btn btn-danger" name="clear">取消</button>
			  </div>
		</div>
	</body>
</html>
